<template>
  <div class="wrapper">
    <div class="total">可选 店加盟数量: <span>{{ total_vip1 }}</span></div>
    <div class="total">可选 超级经理数量: <span>{{ total_vip2 }}</span></div>
    <div class="total">可选 超级事业部数量: <span>{{ total_vip3 }}</span></div>
    <div class="main">
      <div class="title">请选择店加盟数量:</div>
      <div class="num">
        <cube-input v-model="vip1" :disabled="+total_vip1 === 0" :clearable="{visible: true, blurHidden: true}" />
      </div>
      <div class="title">请选择超级经理数量:</div>
      <div class="num">
        <cube-input v-model="vip2" :disabled="+total_vip2 === 0" clearable />
      </div>
      <div class="title">请选择超级事业部数量:</div>
      <div class="num">
        <cube-input v-model="vip3" :disabled="+total_vip3 === 0" clearable />
      </div>
    </div>
    <div class="btn">
      <cube-button primary @click="save">确 定</cube-button>
    </div>
    <div class="log">记录:</div>
    <div class="list">
      <div class="item" v-for="(item, index) in list" :key="index">
        <div class="time">时间: {{ item.create_time }}</div>
        <div class="num" v-if="+item.vip1 > 0">店加盟数量: {{ item.vip1 }}</div>
        <div class="num" v-if="+item.vip2 > 0">超级经理数量: {{ item.vip2 }}</div>
        <div class="num" v-if="+item.vip3 > 0">超级经理数量: {{ item.vip3 }}</div>
        <div class="status">{{ item.status | statusText }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/api'
import base64 from '@/util/base64'
export default {
  data() {
    return {
      total_vip1: 0,
      total_vip2: 0,
      total_vip3: 0,
      vip1: 0,
      vip2: 0,
      vip3: 0,
      list: []
    }
  },
  filters: {
    statusText(v) {
      let str = ''
      if (+v === 0) {
        str = '待处理'
      }
      if (+v === 1) {
        str = '已完成'
      }
      if (+v === -1) {
        str = '已驳回'
      }
      return str
    }
  },
  methods: {
    fetch() {
      api.Store.getReferrer().then(response => {
        let { data } = response
        data = base64.parse(data)
        // console.log(data)
        this.total_vip1 = data.vip1
        this.total_vip2 = data.vip2
        this.total_vip3 = data.vip3
      })
    },
    save() {
      if (isNaN(+this.vip1) || isNaN(+this.vip2) || isNaN(+this.vip3) || (+this.vip1 + +this.vip2 + +this.vip3) <= 0) {
        return this.$createToast({
          type: 'error',
          time: 500,
          txt: '数量错误',
        }).show()
      }
      if (+this.vip1 > +this.total_vip1 || +this.vip2 > +this.total_vip2 || +this.vip3 > +this.total_vip3) {
        return this.$createToast({
          type: 'error',
          time: 500,
          txt: '数量超限',
        }).show()
      }
      api.Store.saveReferrer({
        vip1: this.vip1,
        vip2: this.vip2,
        vip3: this.vip3,
      }).then(() => {
        return this.$createToast({
          type: 'correct',
          time: 500,
          txt: '操作成功',
          onTimeout: () => {
            // this.$router.push('/account/store?type=0')
            this.fetch()
            this.getLog()
          }
        }).show()
      })
    },
    getLog() {
      api.Store.logReferrer().then(response => {
        let { data } = response
        data = base64.parse(data)
        this.list = data.list
      })
    }
  },
  created() {
    this.fetch()
    this.getLog()
  }
}
</script>

<style scoped lang="stylus">
.wrapper
  .total, .log
    background white
    height 30px
    line-height 30px
    //color white
    text-align left
    padding 0 10px
    span
      color red
      font-size 16px
      font-weight 700
  .main
    background white
    margin 10px 0
    padding 10px
    //height 100px
    .title
      height 30px
      line-height 30px
      text-align left
  .log
    margin-top 10px
    background none
    color #333
    font-weight 700
    height 30px
    line-height 30px
  .list
    padding 0 10px
    text-align left
    .item
      margin-bottom 10px
      background white
      padding 10px
      border-radius 5px
      .time, .num, .status
        height 20px
      .time
        color #ccc
      .status
        color red
</style>
